<template>
  <div class="vuelist" :class="elclass">
      <div class="topzoon">
          <template
            v-for=" i in listdetail"
            :key="i.id"
            >
         <div class="top" v-if="i.id<3">
         <div class="top-itembg"
         :style="{backgroundImage:`url(${i.rankimg})`}"
         ></div>
         <div class="top-itemava"></div>
         <div class="top-itemname">{{i.username}}</div>
         <div class="top-itemdistance"
         v-if="i.id!==0"
         >距上一名：{{i.distance}}</div> 
         </div>
          </template>
      </div>




        <div class="totallist">
               <template v-for=" i in listdetail" :key="i.id">
      <div class="list-item" v-if="i.id>2" >
          <div class="item-rank center"
           :style="{backgroundImage:`url(${i.rankimg})`}"
          >{{i.id+1}} </div>
          <!-- <div
           class="item-bg center" 
          
            ></div> -->
          <div class="item-avatar center"></div>
          <div class="item-name center">用户昵称用户昵</div>
          <div class="item-distance center">
              距上一名<br/>
                <span>2000000</span>
          </div>
         
      </div>
      </template>
        </div>
   
  </div>
</template>

<script>

import { reactive, toRef } from "vue"
export default {
        props:{
                ranklist:{
                    // require:true,
                    type:Array
                },
                class:{
                    type:String
                },
               rankimg:{
                   type:Array
               }
        },
        setup(props,context){
            const elclass = toRef(props,'class')
            const rankimg = toRef(props,"rankimg")
            console.log(rankimg.value[0]);
            const listdetail = reactive([
                {
                    id:0,
                    rankimg:rankimg.value[0],
                    username:"top1111",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                                {
                    id:1,
                    rankimg:rankimg.value[1],
                    username:"top2222",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                                {
                    id:2,
                    rankimg:rankimg.value[2],
                    username:"top33333",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                                {
                    id:3,
                    rankimg:rankimg.value[3]?rankimg.value[3]:null,
                    username:"王小虎呼呼呼呼",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                                {
                    id:4,
                    rankimg:rankimg.value[4]?rankimg.value[4]:null,
                    username:"王小虎呼呼呼呼",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                                {
                    id:5,
                    rankimg:rankimg.value[5]?rankimg.value[5]:null,
                    username:"王小虎呼呼呼呼",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                                {
                    id:6,
                    rankimg:rankimg.value[6]?rankimg.value[6]:null,
                    username:"王小虎呼呼呼呼",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                                {
                    id:7,
                    rankimg:rankimg.value[7]?rankimg.value[7]:null,
                    username:"王小虎呼呼呼呼",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                   {
                    id:8,
                    rankimg:rankimg.value[8]?rankimg.value[8]:null,
                    username:"王小虎呼呼呼呼",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                   {
                    id:9,
                    rankimg:rankimg.value[9]?rankimg.value[9]:null,
                    username:"王小虎呼呼呼呼",
                    distance:100000,
                    totalnum:1000000,
                    avatar:null
                },
                
            ])


            return {
                elclass,
                listdetail
            }
        }
}
</script>

<style scoped lang="less">
.center{
    top: 50%;
    transform: translateY(-50%);
}
.vuelist{
    // display: flex;
    // flex-direction: column;
    .topzoon{
        width: 100%;
        height: 150px;
        position: relative;
            .top{
                position: absolute;
                width: 100px;
                height: 100px;
                .top-itembg{
                    position: absolute;
                    width: 100px;
                    height:83px;
                    z-index: 2;
                }
                .top-itemava{
                    position: absolute;
                    top: 20px;
                    left: 19px;
                    width: 63px;
                    height: 63px;
                    background-color: #000;
                    border-radius: 50%;
                    z-index: 1;
                    
                }
                .top-itemname{
                    position: absolute;
                    bottom:0px;
                    width: 100%;
                    text-align: center;
                    height:13px;
                    line-height: 13px;
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #FFFCE7;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .top-itemdistance{
                    position: absolute;
                    bottom: -15px;
                    width: 100%;
                    text-align: center;
                    height: 12.5px;
                    line-height:12.5px;
                    font-size: 10px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FFF17D;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
            }
            .top:nth-child(1){
                top: 15px;
               left: 50%;
               transform: translateX(-50%);
            }
            
            .top:nth-child(2){
                top: 65px;
                left:20px;
            }
           .top:nth-child(3){
                top: 65px;
                right: 20px;
            }
        
        // background-color: #F85710;

    }
   .totallist{
       width: 100%;
       margin-top: 60px;
        .list-item{
        width: 100%;
        height: 90px;
        // background-color: orangered;
        position: relative;
        background-image: url(../assets/page2/itembg.png);
        margin-bottom: 10px;
      .item-rank{
            position: absolute;
            left: 15px;
            height:10px;
            font-size: 14px;
            font-family: Arial;
            font-weight: 400;
            color: #FFF8BC;
        }
        // .item-bg{
        //     position: absolute;
        //     left: 55px;
        //     width: 47px;
        //     height: 46px;
        //     // background-image: url(../assets/page3/hn_kuang@3x.png);
        //     z-index: 1;
        // }
        .item-avatar{
            position: absolute;
            left: 40px;
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
        }
        .item-name{
            position: absolute;
            left: 100px;
            width: 125px;
            // background-color: #F85710;
            height: 25px;
            line-height: 25px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 600;
            color: #FFFCE7;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .item-distance{
            position: absolute;
            right:23px;
            width: 50px;
            height: 40px;
            line-height: 20px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            span{
                color: #FFF17D;
            }
        }
 
    }
   }
}

    
</style>